// import type { ColumnsType } from "antd/lib/table";
import { Table, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import React from "react";


export default function TableCom() {
  //2. 定义单条数据的接口
  interface Star {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
  }

  //3. 定义表格的结构
  let columns: ColumnsType<Star> = [
    //定义表格每一列的数据
    {
      title: '姓名',
      dataIndex: 'name'
    },
    {
      title: '年龄',
      dataIndex: 'age'
    },
    {
      title: '地址',
      dataIndex: 'address'
    },
    {
      title: '标签',
      dataIndex: 'tags',
      //value 是当前对象中 tags 的属性值
      // record 是当前行的完整对象
      render: (value, record) => {
        return record.tags.map((item, index) => {
          return <Tag key={index} color="#f50">{item}</Tag>
        })
      }
    }
  ]

  //1. 准备数据
  const data = [
    {
      key: "1",
      name: "刘德华",
      age: 32,
      address: "香港九龙湾地带",
      tags: ["歌手", "演员"],
    },
    {
      key: "2",
      name: "易烊千玺",
      age: 22,
      address: "北京",
      tags: ["年轻人", "歌手"],
    },
    {
      key: "3",
      name: "王源",
      age: 23,
      address: "英国上学",
      tags: ["有钱人的孩子", "留学生", "抽烟"],
    },
  ];

  return <div>
    <h2>明星</h2>
    <Table columns={columns} dataSource={data} />
  </div>;
}
